<template>
  <div class="canvas1" ref="canvasRef"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";
const canvasRef = ref(null);
const myEchart = ref(null);
onMounted(() => {
  myEchart.value = echarts.init(canvasRef.value);
  let option = {
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all',
        },
        {
          yAxisIndex: 'all',
        },
      ],
    },
    grid: [
      {
        width: "30%",
      },
      {
        left: "60%",
        width: "30%",
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        type: "category",
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        gridIndex: 1,
        type: "category",
        data: ["2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
      },
    ],
    tooltip: {
      axisPointer: {
        type: "cross",
      },
    },
    yAxis: [
      {
        gridIndex: 0,
        name: "个",
      },
      {
        gridIndex: 1,
        name: "元",
      },
    ],
    series: [
      {
        id: 0,
        xAxisIndex: 0,
        yAxisIndex: 0,
        name: "mike",
        type: "line",
        data: [32, 12, 45, 56, 78, 23, 90],
      },
      {
        id: 1,
        xAxisIndex: 1,
        yAxisIndex: 1,
        name: "mike",
        type: "line",
        data: [10, 62, 85, 96, 38, 63, 20],
      },
    ],
  };
  myEchart.value.setOption(option);
});
onUnmounted(() => {
  myEchart.value.dispose(canvasRef.value);
});
</script>

<style lang="less" scoped>
.canvas1 {
  width: 800px;
  height: 400px;
  position: relative;
}
</style>
